<!-- 1. nv-file-drop uploader="{Object}" options="{Object}" filters="{String}" -->
<body nv-file-drop uploader="uploader" filters="queueLimit, customFilter">

    <div class="container">

        <div class="row">

            <div class="col-md-3">

                <h3>Select files</h3>

                <div ng-show="uploader.isHTML5">
                    <!-- 3. nv-file-over uploader="link" over-class="className" -->
                    <div class="well my-drop-zone" nv-file-over uploader="uploader">
                        Base drop zone
                    </div>

                    <!-- Example: nv-file-drop uploader="{Object}" options="{Object}" filters="{String}" -->
                    <div nv-file-drop uploader="uploader" options="{}">
                        <div class="well">
                            <label class="btn btn-default btn-file" >
							    Choose File <input type="file" nv-file-select uploader="uploader" style="display: none">
							</label>
                        </div>
                    </div>
                </div>

                <!-- Example: nv-file-select uploader="{Object}" options="{Object}" filters="{String}" -->
                Multiple:
                <label class="btn btn-default btn-file">
				    Choose File <input type="file" nv-file-select uploader="uploader" multiple style="display: none">
				</label>
				<br><br>
                Single:
                <label class="btn btn-default btn-file" >
				    Choose File <input type="file" nv-file-select uploader="uploader" style="display: none">
				</label>
            </div>

            <div class="col-md-9" style="margin-bottom: 40px">

                <h3>Upload queue</h3>
                <p>Queue length: {{ uploader.queue.length }}</p>

                <table class="table">
                    <thead>
                        <tr>
                            <th width="30%">Name</th>
                            <th width="10%" ng-show="uploader.isHTML5">Size</th>
                            <th ng-show="uploader.isHTML5">Progress</th>
                            <!-- <th>Status</th> -->
                            <th width="10%" >Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in uploader.queue">
                            <td><strong>{{ item.file.name }}</strong></td>
                            <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
                            <td ng-show="uploader.isHTML5">
                                <div class="progress" style="margin-bottom: 0;">
                                    <div class="progress-bar" ng-class="'progress-bar-' + (item.progress == 100 ? 'success' : 'danger')" role="progressbar" ng-style="{ 'width': item.progress + '%' }"><b>{{item.progress}}%</b></div>
                                </div>
                            </td>
                           <!--  <td class="text-center">
                                <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                                <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                                <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                            </td> -->
                            <td nowrap>
                                <!-- <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                                    <span class="glyphicon glyphicon-upload"></span> Upload
                                </button>
                                <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
                                    <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                                </button> -->
                                <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
                                    <span class="glyphicon glyphicon-trash"></span> Remove
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <div>
                    <button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
                        <span class="glyphicon glyphicon-upload"></span> Upload all
                    </button>
                    <button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
                        <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
                    </button>
                    <button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
                        <span class="glyphicon glyphicon-trash"></span> Remove all
                    </button>
                </div>

            </div>

        </div>

    </div>